<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('设备信息')"/>
</head>
<style type="text/css">
    .t-ctn {
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .t-ctn .s-ctn {
        height: 604px;
        width:990px;
/*         white-space: nowrap; */
/*         font-size: 0; */
    }

    .t-ctn .s-ctn div {
    	background-color: #f9f9f9;
        box-sizing: border-box;
        overflow: hidden;
        display: inline-block;
        width: 226px;
        height: 150px;
        border: 2px solid #afb9de;
        margin: 5px;
    }
    .t-ctn .s-ctn div p{
    	color: #333;
   	    margin-top: 10px;
 	    margin-left: 27px;
    }
    .t-ctn .s-ctn div img{
    	color: #333;
   	    margin-top: 10px;
 	    margin-left: 32px;
    }
    .t-ctn .s-ctn div span{
    	color: #333
    }
    
   	.button1:hover{
   		background:url(/img/button2.png) center no-repeat  !important;
   		background-size: 30px 30px !important;
	}
   	.button2:hover{
   		background:url(/img/button1.png) center no-repeat  !important;
   		background-size: 30px 30px !important;
	}
    
</style>
<body class="gray-bg">
	<input type="hidden" id="dprtcode" name="dprtcode"  readonly />
    <div class="col-sm-12  table-striped " style="width: 975px;overflow-y:auto;height: 604px;color: #ffffff" >
	    <div class="t-ctn">
	        <div class="s-ctn" id="center1">
	            
	        </div>
    	</div>
	</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
	$("#dprtcode").val(window.parent.document.getElementById("dprtcode").value);


		
      	 init();
		function init(){
			 var obj = {};
		     obj.dprtcode =  $("#dprtcode").val();
			$.ajax({
			    cache: true,
			    type: "POST",
			    url: ctx + "getLoaddevice",
			    async: false,
			    data: obj,
			    error: function (request) {
			        $.modal.alertError("系统错误");
			    },
			    success: function (info) {
			    	if(info.length > 0){
			       	 initData(info);
			    	}
			    }
			});
			
		}
      	   
		function initData(info){
			$("#center1").empty();
			$.each(info,function(index,row){
				if(row.type != "ES" && row.type != "WS"){//不显示温湿度传感器
					
				 var html="";
				 html += ' <div>';
				 
				var src1="";
				var strname="";
				
				 if(row.type == "EM"){ //温湿度控制主机
					 src1="/img/password2.png";
					 strname="总开关"+row.name;
				 }
				 if(row.type == "ES" || row.type == "WS"){ //温湿度传感器
					 src1="/img/TH2.png";
					 strname="温湿度传感器"+row.name;
				 }

				 if(row.type == "ER" || row.type == "WR"){//红外遥控器
					 src1="/img/air2.png"; //风扇2
					 strname="空调"+row.name;
				 }
				 if(row.type == "EK" || row.type == "WK"){
					 if(row.xzb == 0){ //除湿机
						 
					 src1="/img/H2.png";  //***
					 strname="除湿机"+row.name;
					 
					 }else{ //加热器
						 
					 strname="加热器"+row.name;
					 src1="/img/hot2.png";  //**
					 
					 }
				 }
				 
				 var buttonstr="";
				 var text1="";
				 var text2="";
			
				 if(row.type != "EA" && row.type != "WA" && row.type != "WT"){
					 if(row.sbzt == 1){
						 
						 buttonstr="1";
						 text1="正常";
						 
						 text2="停止";
						 
						  src1=src1.substring(0, src1.length - 5)+"1.png";
						  
						  if(row.type == "EK" || row.type == "WK" || row.type == "ER" || row.type == "WR"){
						  	src1=src1.substring(0, src1.length - 5)+".gif";
						  }
						  
					 }else{
						 text1="停止";
						 
						 text2="开启";
						 buttonstr="2";
					 }
					 	
					 
					 html += ' <p>'+strname+'</p>';
					 html += ' <img src="'+src1+'" alt="" width="80px" height="80px" id="img'+index+'">';
					 
					 if(row.type != "ES" && row.type != "WS"){
						 html += ' <span style="margin-left: 57px;">'+text1+'</span>';
						 html += '<p onclick="stopanstart(this)" id="'+row.id+'"  name="'+row.name+'"  title="'+text2+'" class="button'+buttonstr+'" style="cursor:pointer;background: url(/img/button'+buttonstr+'.png) center no-repeat;margin-top: -98px;margin-left: 171px;    width: 30px;height: 30px;background-size: 30px 30px;"> </p>';
					 }else{
						 html += ' <p style="margin-left: 122px; width: 103px;height: 30px;margin-top: -71px;">温度：'+(formatUndefine(row.wd)==""?"":formatUndefine(row.wd)+" ℃")+'</p>';
						 html += ' <p style="margin-top: -5px;margin-left: 122px;    width: 103px;height: 30px;background-size: 30px 30px;">湿度：'+(formatUndefine(row.sd)==""?"":formatUndefine(row.sd)+" %")+'</p>';
						 
					 }
					 
					 
					 html += ' </div>';
					 $("#center1").append(html);
				 }else{  //WT和WA和EA
					 var strs = row.sbzt.split(",");
					 for (i=0; i<strs.length; i++ ){
					 var html1=html;

						 if(i%2 == 0){//奇数   烟雾、 排风扇  
								if(strs[i] == 0){ //状态为0
									 
									 if(row.type == "WT"){  //排风扇
										 src1="/img/fun2.png"; //排风扇   ****
										 buttonstr="2";
										 strname="排风扇"+row.name;
										 html1 += ' <p>'+strname+'</p>';
										 text1 = '<span style="margin-left: 57px;">停止</span>';
										 text1 += '<p onclick="stopanstart(this)" id="'+row.id+'"  name="'+row.name+'"  title="开启" class="button'+buttonstr+'" style="cursor:pointer;background: url(/img/button'+buttonstr+'.png) center no-repeat;margin-top: -98px;margin-left: 171px;    width: 30px;height: 30px;background-size: 30px 30px;"> </p>';
									 }else{
										 
										 
										 
										 strname="烟雾报警"+row.name;
										 html1 += ' <p>'+strname+'</p>';
										 src1="/img/alarm1.png"; 
										 text1='<span style="margin-left: 35px;">正常</span>';
									 }
								 
								 }else{
									 
									 if(row.type == "WT"){  //排风扇
										 src1="/img/fun.gif"; 
										 buttonstr="1";
										 strname="排风扇"+row.name;
										 html1 += ' <p>'+strname+'</p>';
										 text1 = '<span style="margin-left: 57px;">正常</span>';
										 text1 += '<p onclick="stopanstart(this)" id="'+row.id+'"  name="'+row.name+'"  title="停止" class="button'+buttonstr+'" style="cursor:pointer;background: url(/img/button'+buttonstr+'.png) center no-repeat;margin-top: -98px;margin-left: 171px;    width: 30px;height: 30px;background-size: 30px 30px;"> </p>';
									 }else{
										 strname="烟雾报警"+row.name;
										 html1 += ' <p>'+strname+'</p>';
										 src1="/img/alarm2.png";  //烟雾
										 text1='<span style="margin-left: 35px;">烟雾报警</span>';
									 }
									 
								 }
							 
								 html1 += ' <img src	="'+src1+'" alt="" width="80px" height="80px" id="img'+index+'">';
								 html1 += text1;
								 html1 += ' </div>';
								 $("#center1").append(html1);
								 html1="";
							 
						 }else{//偶数  高温、照明灯
								if(strs[i] == 0){ //状态为0
									 
									 if(row.type == "WT"){  //照明灯
										 src1="/img/light2.png"; 
										 buttonstr="2";
										 strname="照明灯"+row.name;
										 html1 += ' <p>'+strname+'</p>';
										 text1 = '<span style="margin-left: 57px;">停止</span>';
										 text1 += '<p onclick="stopanstart(this)" id="'+row.id+'"  name="'+row.name+'"  title="开启" class="button'+buttonstr+'" style="cursor:pointer;background: url(/img/button'+buttonstr+'.png) center no-repeat;margin-top: -98px;margin-left: 171px;    width: 30px;height: 30px;background-size: 30px 30px;"> </p>';
									 
									 }else{
										 src1="/img/gaowen1.png"; 
										 strname="高温报警"+row.name;
										 html1 += ' <p>'+strname+'</p>';
										 text1='<span style="margin-left: 35px;">正常</span>';
									 }
								 }else{
									 
									 if(row.type == "WT"){  
										 src1="/img/light1.png"; 
										 buttonstr="1";
										 strname="照明灯"+row.name;
										 html1 += ' <p>'+strname+'</p>';
										 text1 = '<span style="margin-left: 57px;">正常</span>';
										 text1 += '<p onclick="stopanstart(this)" id="'+row.id+'"  name="'+row.name+'"  title="停止" class="button'+buttonstr+'" style="cursor:pointer;background: url(/img/button'+buttonstr+'.png) center no-repeat;margin-top: -98px;margin-left: 171px;    width: 30px;height: 30px;background-size: 30px 30px;"> </p>';
									 
									 }else{
										 src1="/img/gaowen2.png";  //高温
										 strname="高温报警"+row.name;
										 html1 += ' <p>'+strname+'</p>';
										 text1='<span style="margin-left: 35px;">高温报警</span>';
										 
									 }
									 
								 }
							 
								 html1 += ' <img src	="'+src1+'" alt="" width="80px" height="80px" id="img'+index+'">';
								 html1 += text1;
								 html1 += ' </div>';
								 $("#center1").append(html1);
								 html1="";
 							
						 }
						
					 }
					 
				 }
			}
			
			 });
			
		}
		
		
		/**
		 */
		function stopanstart(this_){
			var id=$(this_).attr("id");
			var name=$(this_).attr("name");
			
			alert("操作成功！");
		}	
			
</script>
</body>
</html>
